<template>
  <!-- 添加机构成员 -->
  <el-dialog top="10vh" :title="title" :visible.sync="dialogShow" width="561px" @close="close" :close-on-click-modal="false">
    <div class="patientAdd_inner">
      <el-form
        ref="form"
        :rules="rules"
        label-position="top"
        label-width="100px"
        :model="form"
        :size="formItemSize"
      >
        <el-form-item :label="$t('patient.huanzhe20')" prop="name">
          <el-input
            v-model="form.name"
            style="width: 320px"
            :placeholder="$t('patient.huanzhe21')"
          />
        </el-form-item>
        <el-form-item :label="$t('add.add40')" prop="birthday">
          <el-date-picker
            v-model="form.birthday"
            :picker-options="pickerOptions0"
            value-format="yyyy-MM-dd"
            type="date"
            :placeholder="$t('add.add41')"
            @change="ageChange"
          />
          <!-- <el-input max="200" type="number" style="width:320px" v-model="form.age"
          :placeholder="$t('patient.huanzhe23')" />-->
        </el-form-item>
        <el-form-item :label="$t('data.data26')" prop="age">
          <el-input v-model="form.age" disabled style="width: 320px" />
        </el-form-item>
        <el-form-item :label="$t('patient.huanzhe24')" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio :label="0">{{ $t('patient.huanzhe25') }}</el-radio>
            <el-radio :label="1">{{ $t('patient.huanzhe26') }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('patient.huanzhe27')" prop="contactWay">
          <!-- <el-select placeholder="请选择国家">
                        <el-option label="+86" value="shanghai"></el-option>
          </el-select>-->
          <el-input
            v-model="form.contactWay"
            style="width: 320px"
            :maxlength="30"
            :placeholder="$t('patient.huanzhe28')"
          />
        </el-form-item>
        <el-form-item :label="$t('patient.huanzhe29')" prop>
          <el-checkbox-group v-model="form.caseBeforeSelect">
            <el-checkbox v-for="(item, index) in caseBeforeSelectArr" :key="index" :label="item" />
          </el-checkbox-group>
          <div>
            <el-input
              v-model="form.caseBeforeRemark"
              style="width: 100%; margin-top: 5px"
              :placeholder="$t('patient.huanzhe30')"
            />
          </div>
        </el-form-item>
        <el-form-item :label="$t('patient.huanzhe31')" prop>
          <el-input
            v-model="form.caseAllergy"
            style="width: 100%; margin-top: 5px"
            :placeholder="$t('patient.huanzhe32')"
          />
        </el-form-item>
        <el-form-item :label="$t('patient.huanzhe33')" prop>
          <el-checkbox-group v-model="form.mouthHabitSelect">
            <el-checkbox v-for="(item, index) in mouthHabitRemarktArr" :key="index" :label="item" />
          </el-checkbox-group>
          <div>
            <el-input
              v-model="form.mouthHabitRemark"
              style="width: 100%; margin-top: 5px"
              :placeholder="$t('patient.huanzhe34')"
            />
          </div>
        </el-form-item>
        <el-form-item :label="$t('patient.huanzhe35')" prop>
          <el-input
            v-model="form.remark"
            type="textarea"
            style="width: 100%"
            :placeholder="$t('patient.huanzhe36')"
          />
        </el-form-item>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button plain :size="optionButtonSize" @click="cancleHandle">{{
        $t('patient.huanzhe37')
      }}</el-button>
      <el-button type="primary" :size="optionButtonSize" :loading="loading" @click="submitHandle">
        {{ $t('patient.huanzhe38') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'BLZMasterIndex',

  data() {
    return {
      dialogShow: false,
      title: this.$t('patient.huanzhe19'),
      form: {
        name: '', // 姓名
        age: '', // 年龄
        birthday: '',
        sex: '', // 性别
        contactWay: '', // 邮箱或手机号
        caseBeforeRemark: '', // 既往史
        caseBeforeSelect: [], // 既往史选项
        caseAllergy: '', // 过敏史
        mouthHabitRemark: '', // 口腔习惯
        mouthHabitSelect: [], // 口腔习惯选项
        remark: '', // 备注
      },
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },

      mouthHabitRemarktArr: [], // 口腔习惯
      caseBeforeSelectArr: [], // 既往史
      rules: {
        name: [{ required: true, message: this.$t('add.add44'), trigger: 'blur' }],
        birthday: [{ required: true, message: this.$t('add.add45'), trigger: 'blur' }],
        age: [{ required: true, message: this.$t('add.add46'), trigger: ['blur', 'change'] }],
        sex: [{ required: true, message: this.$t('add.add47'), trigger: ['blur', 'change'] }],
        contactWay: [
          {
            pattern: new RegExp(/^[A-Za-z0-9]+$/),
            message: this.$t('add.add059'),
            trigger: 'blur',
          },
        ],
      },
      loading: false,
    };
  },
  created() {
    this.getMouthHabitRemark();
    this.getCaseBeforeSelect();
  },
  mounted() {},

  methods: {
    // 获取口腔习惯
    getMouthHabitRemark() {
      this.$http
        .get('/sys/params/get?paramCode=PatientMouthHabit')
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.mouthHabitRemarktArr = res.data;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 获取既往史
    getCaseBeforeSelect() {
      this.$http
        .get('/sys/params/get?paramCode=PatientCaseBefore')
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.caseBeforeSelectArr = res.data;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    ageChange(val) {
      var date = new Date();
      date.getFullYear();
      this.form.age = date.getFullYear() - val.slice(0, 4);
    },
    // 取消
    cancleHandle() {
      this.dialogShow = false;
      this.form = {
        name: '', // 姓名
        age: '', // 年龄
        sex: '', // 性别
        contactWay: '', // 邮箱或手机号
        caseBeforeRemark: '', // 既往史
        caseBeforeSelect: [], // 既往史选项
        caseAllergy: '', // 过敏史
        mouthHabitRemark: '', // 口腔习惯
        mouthHabitSelect: [], // 口腔习惯选项
        remark: '', // 备注
      };
    },
    // 确定
    submitHandle() {
      // if (!this.form.name) {
      //   return this.$message.error(this.$t('add.add44'));
      // } else if (this.form.birthday == '' || this.form.birthday == null) {
      //   return this.$message.error(this.$t('add.add45'));
      // } else if (this.form.age < 0) {
      //   return this.$message.error(this.$t('add.add45'));
      // } else if (this.form.sex === '') {
      //   return this.$message.error(this.$t('add.add47'));
      // }

      if (this.form.caseBeforeSelect) {
        this.form.caseBeforeSelect = JSON.stringify(this.form.caseBeforeSelect);
      }
      if (this.form.mouthHabitSelect) {
        this.form.mouthHabitSelect = JSON.stringify(this.form.mouthHabitSelect);
      }
      this.$refs.form.validate((isValid) => {
        if (isValid) {
          this.loading = true;
          let url, text;
          if (this.title == this.$t('patient.huanzhe19')) {
            url = '/patient/save';
            text = this.$t('patient.huanzhe39');
            this.$http
              .post(url, this.form)
              .then(({ data: res }) => {
                console.log('res--->', res);
                if (res.code !== 0) {
                  return this.$message.error(res.msg);
                } else {
                  this.$message.success(text);
                  this.dialogShow = false;
                  this.form = {
                    name: '', // 姓名
                    age: '', // 年龄
                    sex: '', // 性别
                    contactWay: '', // 邮箱或手机号
                    caseBeforeRemark: '', // 既往史
                    caseBeforeSelect: [], // 既往史选项
                    caseAllergy: '', // 过敏史
                    mouthHabitRemark: '', // 口腔习惯
                    mouthHabitSelect: [], // 口腔习惯选项
                    remark: '', // 备注
                  };
                }
                setTimeout(() => {
                  this.loading = false;
                }, 1000);
              })
              .catch((err) => {
                this.loading = false;
                console.log('err', err);
              });
          } else if (this.title == '编辑患者') {
            if (!this.form.name) {
              return this.$message.error(this.$t('add.add44'));
            } else if (this.form.birthday == '' || this.form.birthday == null) {
              return this.$message.error(this.$t('add.add45'));
            } else if (this.form.age < 0) {
              return this.$message.error(this.$t('add.add45'));
            } else if (this.form.sex === '') {
              return this.$message.error(this.$t('add.add47'));
            }
            url = '/patient/edit';
            text = '编辑成功';
            this.$http
              .put(url, this.form)
              .then(({ data: res }) => {
                if (res.code !== 0) {
                  return this.$message.error(res.msg);
                } else {
                  this.$message.success(text);
                  this.dialogShow = false;
                  this.form = {
                    name: '', // 姓名
                    age: '', // 年龄
                    sex: '', // 性别
                    contactWay: '', // 邮箱或手机号
                    caseBeforeRemark: '', // 既往史
                    caseBeforeSelect: [], // 既往史选项
                    caseAllergy: '', // 过敏史
                    mouthHabitRemark: '', // 口腔习惯
                    mouthHabitSelect: [], // 口腔习惯选项
                    remark: '', // 备注
                  };
                }
                setTimeout(() => {
                  this.loading = false;
                }, 1000);
              })
              .catch((err) => {
                this.loading = false;
                console.log('err', err);
              });
          }
          this.$emit('getPatientList');
        }
      });
    },
    close() {
      this.form = {
        name: '', // 姓名
        age: '', // 年龄
        sex: '', // 性别
        contactWay: '', // 邮箱或手机号
        caseBeforeRemark: '', // 既往史
        caseBeforeSelect: [], // 既往史选项
        caseAllergy: '', // 过敏史
        mouthHabitRemark: '', // 口腔习惯
        mouthHabitSelect: [], // 口腔习惯选项
        remark: '', // 备注
      };
    },
  },
};
</script>

<style lang="scss" scoped></style>
